var data1=[
	['上海有孚网络股份有限公司',5406],
	['上海蓝云网络科技有限公司',3359],
	['上海美橙科技信息发展有限公司',166],
	['上海优刻得信息科技有限公司',34],
	['上海盛霄云计算技术有限公司',26],
	['网宿科技股份有限公司',10],
	['万达信息股份有限公司',3],
	['上海易声通信技术发展有限公司',2],
	['中宇联云计算服务（上海）有限公司',2],
	['上海宽惠网络科技股份有限公司',2],
	['上海七牛信息技术有限公司',2],
	['上海安畅网络科技股份有限公司',1],
	['上海漱珉云计算科技有限公司',1],
	['咪咕视讯科技有限公司',1],
	['世纪互联（上海）信息科技有限公司',1]
]
var data2=[
	['网宿科技股份有限公司',5],
	['上海曙安数据服务有限公司',5],
	['上海浪潮云计算服务有限公司',5],
	['上海蓝云网络科技有限公司',4],
	['久渠信息技术（上海）有限公司',4],
	['中昌新信息科技（上海）有限公司',3],
	['上海有孚网络股份有限公司',3],
	['兆远信息咨询有限公司',3],
	['上海红帽信息技术有限公司',3],
	['上海优刻得信息科技有限公司',3],
	['上海网域网络科技有限公司',2],
	['上海脉创网络科技有限公司',2],
	['咪咕视讯科技有限公司',2],
	['上海飞络信息科技有限公司',2],
	['上海智臻智能网络科技股份有限公司',2]
]
var data3=[
	['上海蓝云网络科技有限公司',377881],
	['上海优刻得信息科技有限公司',65539],
	['上海盛霄云计算技术有限公司',3039],
	['网宿科技股份有限公司',813],
	['上海有孚网络股份有限公司',297],
	['上海地面通信息网络股份有限公司',257],
	['万达信息股份有限公司',208],
	['上海乾万网络科技有限公司',105],
	['上海宽惠网络科技股份有限公司',89],
	['上海兆言网络科技有限公司',71],
	['世纪互联（上海）信息科技有限公司',29],
	['上海七牛信息技术有限公司',16],
	['上海数讯信息技术有限公司',12],
	['上海漱珉云计算科技有限公司',10],
	['上海携程商务有限公司',10]
]
listEvt(data1)
//右下tab切换
$(".YUNitem li").click(function(){
	n=$(this).index();
	$(this).addClass('active').siblings().removeClass('active')
	if(n==0){
		$(".YUNitem .tab_heard").html("")
	    $(".YUNitem .tab_heard").append("<tr>"+
	                "<th style='width:60px'>排名</th>"+
	                "<th>云企业名称</th>"+
	                "<th style='width:150px'>用户名总数</th>"+
	            +"</tr>")
		listEvt(data1)
	}else if(n==1){
		$(".YUNitem .tab_heard").html("")
	    $(".YUNitem .tab_heard").append("<tr>"+
	                "<th style='width:60px'>排名</th>"+
	                "<th>云企业名称</th>"+
	                "<th style='width:150px'>机房数</th>"+
	            +"</tr>")
		listEvt(data2)
	}else if(n==2){
		$(".YUNitem .tab_heard").html("")
	    $(".YUNitem .tab_heard").append("<tr>"+
	                "<th style='width:60px'>排名</th>"+
	                "<th>云企业名称</th>"+
	                "<th style='width:150px'>IP数</th>"+
	            +"</tr>")
		listEvt(data3)
	}
})

function listEvt(data){
	$("#ranklistRight1 .tab_content").html("")
        for(var i=0;i<data.length;i++){
            $("#ranklistRight1 .tab_content").append("<tr>"+
                    "<td style='width:60px'>"+(i+1)+"</td>"+
                    "<td title='"+data[i][0]+"'>"+data[i][0]+"</td>"+
                    "<td style='width:150px'>"+data[i][1]+"</td>"+
                +"</tr>")
        }
}



var geoCoordMap={}
var mapFeatures = echarts.getMap('上海').geoJson.features;
mapFeatures.forEach(function(v) {
    // 地区名称
    var name = v.properties.name;
    // 地区经纬度
    geoCoordMap[name] = v.properties.cp;
});

var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
            res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value)
            });
        }
    }
    console.log(res)
    return res;
};

var mapData  = [
	{name:'宝山区',value:10},
	{name:'奉贤区',value:0},
	{name:'虹口区',value:2},
	{name:'黄浦区',value:4},
	{name:'嘉定区',value:2},
	{name:'静安区',value:3},
	{name:'闵行区',value:4},
	{name:'浦东新区',value:15},
	{name:'普陀区',value:5},
	{name:'青浦区',value:0},
	{name:'松江区',value:0},
	{name:'徐汇区',value:5},
	{name:'杨浦区',value:1},
	{name:'闸北区',value:2},
	{name:'长宁区',value:0},
	{name:'崇明县',value:0},
	{name:'金山区',value:0}
];

function getOptionMap(data,max,type){
	var optionMap = {
			tooltip: {
				trigger: 'item',
				formatter:function(param){
					var province = param.name;
						return	'<div>'+param.name+'</div>' +
					        '<div>'+type+'数量：'+param.data.value[2]+'</div>';
					}  
			},
			geo: {
				show: true,
				zoom: 1.2,
				roam: false,
				map: '上海',
				itemStyle: {
					normal: {
						show: false,
						borderColor: '#285ac6',
						borderWidth: 1,
						areaColor: '#123082',
						shadowBlur: 3,
						shadowColor: '#081435',
						shadowOffsetX: -4,
						shadowOffsetY: 8
					},
					emphasis: {
						areaColor: '#fce24f',
						borderColor: '#fce24f'
					}
				}
			},
			series: [{
				type: 'map',
					zoom: 1.2,
					mapType: '上海',
					//		geoIndex: 0,
					roam: false,
					label: {
						normal: {
							show: false,
							textStyle: {
								color: '#fff'
							}
						},
						emphasis: {
							show: true,
							textStyle: {
								color: '#fff'
							}
						}
					},
					itemStyle: {
						normal: {
							show: false,
							borderColor: '#3770ea',
							borderWidth: 1,
							areaColor: '#0f2d87'
						},
						emphasis: {
							areaColor: '#2a56bd',
							borderColor: '#2a56bd',
							//				opacity: 0.8,
						}
					},
				data:convertData(data)
			},{
			 	name: 'Top 5',
	      type: 'effectScatter',
	      zlevel: 1,
	      coordinateSystem: 'geo',
	      symbolSize: function (val) {
	          return val[2]/max*20+5
	      },
	      showEffectOn: 'render',
	      rippleEffect: {
	          brushType: 'stroke'
	      },
	      hoverAnimation: true,
	      label: {
	          normal: {
	//            formatter: '{b}',
			        position: 'right',
			        show: false
	          }
	      },
	      itemStyle: {
	          normal: {
	              color: '#f4e925',
	              shadowBlur: 10,
	              shadowColor: '#333'
	          }
	      },
	//    data: convertData(mapData)
				data:convertData(data.sort(function(a,b){
					return b.value-a.value
				}).slice(0,5))
			},{
			 	name: 'Top 5',
	      type: 'scatter',
	      zlevel: 1,
	      coordinateSystem: 'geo',
	      symbolSize: function (val) {
	//        return val*4+8;
					return val[2]/max*20+5
	      },
	      showEffectOn: 'render',
	      rippleEffect: {
	          brushType: 'stroke'
	      },
	      hoverAnimation: true,
	      label: {
	          normal: {
	//            formatter: '{b}',
			        position: 'right',
			        show: false
	          }
	      },
	      itemStyle: {
	          normal: {
	              color: '#f4e925',
	              shadowBlur: 10,
	              shadowColor: '#333'
	          }
	      },
	//    data: convertData(mapData)
				data:convertData(data.sort(function (a, b) {
	          return b.value - a.value;
	      }).slice(5))
			}]
		};
	return optionMap;
}

var mapChart = echarts.init(document.getElementById('ec_map_nd'))
mapChart.setOption(getOptionMap(mapData,15,'企业'))

$(".mapChange").change(function(){
    var n = $(this).val();
    var mapData = null;
    var option = null;
    if(n =="企业"){
    	mapData = [
    		{name:'宝山区',value:10},
    		{name:'奉贤区',value:0},
    		{name:'虹口区',value:2},
    		{name:'黄浦区',value:4},
    		{name:'嘉定区',value:2},
    		{name:'静安区',value:3},
    		{name:'闵行区',value:4},
    		{name:'浦东新区',value:15},
    		{name:'普陀区',value:5},
    		{name:'青浦区',value:0},
    		{name:'松江区',value:0},
    		{name:'徐汇区',value:5},
    		{name:'杨浦区',value:1},
    		{name:'闸北区',value:2},
    		{name:'长宁区',value:0},
    		{name:'崇明县',value:0},
    		{name:'金山区',value:0}
    	];
    	option = getOptionMap(mapData,61,n);
    }else if(n =="机房"){
    	mapData = [
    		{name:'宝山区',value:35},
    		{name:'奉贤区',value:0},
    		{name:'虹口区',value:2},
    		{name:'黄浦区',value:9},
    		{name:'嘉定区',value:3},
    		{name:'静安区',value:9},
    		{name:'闵行区',value:4},
    		{name:'浦东新区',value:38},
    		{name:'普陀区',value:22},
    		{name:'青浦区',value:0},
    		{name:'松江区',value:1},
    		{name:'徐汇区',value:17},
    		{name:'杨浦区',value:2},
    		{name:'闸北区',value:3},
    		{name:'长宁区',value:1},
    		{name:'崇明县',value:0},
    		{name:'金山区',value:1}
    	];
    	option = getOptionMap(mapData,38,n);
    }else if(n =="IP地址"){
    	mapData = [
    		{name:'宝山区',value:4752198},
    		{name:'奉贤区',value:0},
    		{name:'虹口区',value:11},
    		{name:'黄浦区',value:390569},
    		{name:'嘉定区',value:4041742},
    		{name:'静安区',value:71846},
    		{name:'闵行区',value:223},
    		{name:'浦东新区',value:4895477},
    		{name:'普陀区',value:524},
    		{name:'青浦区',value:0},
    		{name:'松江区',value:2},
    		{name:'徐汇区',value:134674},
    		{name:'杨浦区',value:31},
    		{name:'闸北区',value:7},
    		{name:'长宁区',value:34},
    		{name:'崇明县',value:0},
    		{name:'金山区',value:308565}
    	];
    	option = getOptionMap(mapData,4895477,n);
    }else if(n =="域名"){
    	mapData = [
    		{name:'宝山区',value:2440869},
    		{name:'奉贤区',value:0},
    		{name:'虹口区',value:4},
    		{name:'黄浦区',value:76538},
    		{name:'嘉定区',value:2145554},
    		{name:'静安区',value:193},
    		{name:'闵行区',value:18},
    		{name:'浦东新区',value:2159816},
    		{name:'普陀区',value:502},
    		{name:'青浦区',value:0},
    		{name:'松江区',value:2},
    		{name:'徐汇区',value:434},
    		{name:'杨浦区',value:11495},
    		{name:'闸北区',value:6},
    		{name:'长宁区',value:5},
    		{name:'崇明县',value:0},
    		{name:'金山区',value:8734}
    	];
    	option = getOptionMap(mapData,2440869,n);
    }
//    optionMap.series[0].data = mapData;
	mapChart.setOption(option)
})

window.addEventListener("resize", function () {
    mapChart.resize();
});